<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<c:set var="context"
	value="${pageContext.request.servletContext.contextPath}" />
<script type="text/javascript">
	$(document).ready(function() {
		createDialogConfirm();
		createDialogAlert();
		createDialogOk();
	});

	$(document).on("click", "#delete", function() {
		try {
			$("#dialog-confirm").dialog("open");
		} catch (e) {
			alert(e);
		}
		return false;
	})

	function createDialogConfirm() {
		var poolId = $("#poolId").text();
		var poolName = $("#poolName").text();
		$("#dialog-confirm").dialog({
			autoOpen : false,
			resizable : false,
			modal : true,
			buttons : {
				"Delete" : function() {
					$.ajax({
						url : "../delete/" + poolId,
						type : "GET",
						error : function() {
							$("#dialog-alert").dialog("open");
						},
						success : function(data) {
							$("#dialog-ok").dialog("open");
							//Return to list page
							window.location.href = "../";
						}
					})
					$(this).dialog("close");
				},
				Cancel : function() {
					$(this).dialog("close");
				}
			}
		});
	};
	function createDialogAlert() {
		$("#dialog-alert").dialog({
			autoOpen : false,
			resizable : false,
			modal : true,
			buttons : {
				OK : function() {
					$(this).dialog("close");
				}
			}
		});
	};

	function createDialogOk() {
		$("#dialog-ok").dialog({
			autoOpen : false,
			resizable : false,
			modal : true,
			buttons : {
				OK : function() {
					$(this).dialog("close");
				}
			}
		});
	};
</script>
<div id="dialog-confirm" title="Delete Confirm">
	<p>
		<span class="ui-icon ui-icon-alert"
			style="float: left; margin: 0 7px 20px 0;"></span>Do you want to
		delete ${pool.questionPoolName}?
	</p>
</div>

<div id="dialog-alert" title="Delete Alert">
	<p>
		<span class="ui-icon ui-icon-alert"
			style="float: left; margin: 0 7px 20px 0;"></span> Can't delete
		${pool.questionPoolName}!
	</p>
</div>
<div id="dialog-ok" title="Delete Success">
	<p>
		<span class="ui-icon ui-icon-alert"
			style="float: left; margin: 0 7px 20px 0;"></span>
		${pool.questionPoolName} deleted!
	</p>
</div>
<!-- Template for all sub-pages -->
<div id="portal_main_content" align="left">
	<!-- Don't change this -->
	<div id="site_title">

		<!-- ************** -->
		<!-- Able to change -->
		<h2>Question Pool: Information</h2>
	</div>
	<!-- Don't change this -->
	<div id="site_content">
		<div id="btn_control">

			<!-- ************** -->
			<!-- Able to change -->
			<a href="../" class="btn btn-primary btn-sm">Back</a> <a
				href="../edit/${pool.questionPoolId}" class="btn btn-primary btn-sm">Edit</a>
			<a href="../detail/${pool.questionPoolId}"
				class="btn btn-primary btn-sm">Detail</a> <a href="" id="delete"
				class="btn btn-primary btn-sm">Delete</a>
		</div>
		<div id="main_content">

			<!-- ************** -->
			<!-- Able to change -->
			<h6 class="hidden" id="poolId">${pool.questionPoolId}</h6>
			<h6 class="hidden" id="poolName">${pool.questionPoolName}</h6>
			<div>
				<fieldset class="input_table">
					<legend>${pool.questionPoolName}</legend>
					<div class="input_row">
						<div>Pool Name</div>
						<div>
							${pool.questionPoolName}
						</div>
					</div>	
					<div class="input_row">
						<div>Description</div>
						<div>
							${pool.description}
						</div>
					</div>
				</fieldset>
			</div>
		</div>
		<div id="table">

			<!-- ************** -->
			<!-- Able to change -->
		</div>

	</div>
</div>

